<template>
  <div style="background-color: #f5f6fa">
    <hear></hear>
    <BDhear :num="4"></BDhear>
    <div class="main">
      <el-row :gutter="15">
        <!-- 投标保函 -->
        <el-form
          ref="elForm"
          v-if="false"
          :model="content"
          size="medium"
          label-width="100px"
        >
          <el-col :span="12">
            <el-form-item label="保函编号" prop="apply_number">
              <el-input
                disabled
                v-model="content.apply_number"
                placeholder="请输入保函编号"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保函金额" prop="bhje">
              <el-input
                disabled
                v-model="content.bhje"
                placeholder="请输入保函金额"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="保证金额" prop="margin_amount">
              <el-input
                v-model="content.bzjje"
                placeholder="请输入保证金额"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="申请人" prop="handler_name">
              <el-input
                disabled
                v-model="content.sqr"
                placeholder="请输入申请人"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 受益人  招标人  投标人 -->
          <el-col :span="12">
            <el-form-item label="受益人" prop="syr">
              <el-input
                disabled
                v-model="content.syr"
                placeholder="请输入受益人"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采购人" prop="zbr">
              <el-input
                disabled
                v-model="content.zbr"
                placeholder="请输入采购人"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投标人" prop="tbr">
              <el-input
                v-model="content.tbr"
                disabled
                placeholder="请输入投标人"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="xmmc">
              <el-input
                disabled
                v-model="content.xmmc"
                placeholder="请输入项目名称"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目编号" prop="xmbh">
              <!-- :disabled="content.xmbh" -->
              <el-input
                disabled
                v-model="content.xmbh"
                placeholder="请输入项目编号"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保证金金额" prop="bzjje">
              <el-input
                @blur="ahsdk"
                :disabled="falasdse"
                v-model="content.bzjje"
                placeholder="请输入保证金金额"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="起始时间" prop="startTime">
              <!-- <el-input
              disabled="true" 
                v-model="content.startTime"
                placeholder="请输入起始时间"
                clearable
                :style="{ width: '100%' }"
              ></el-input> -->
              <el-date-picker
                disabled
                v-model="content.startTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择起始日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="截止时间" prop="endTime">
              <el-date-picker
                disabled
                v-model="content.endTime"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择起始日期"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="担保期限" prop="dbqx">
              <el-input
                disabled
                v-model="content.dbqx"
                placeholder="请输入担保期限"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <!-- 担保公司税率  项目编号 保函金额 是保函-->
            <el-form-item label="保函费率" prop="fl">
              <el-input
                disabled
                v-model="content.fl"
                placeholder="请输入费率"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <!-- 保费金额小于等于200  都是200 -->
            <el-form-item label="保费金额" prop="bfje">
              <el-input
                disabled
                v-model="content.bfje"
                placeholder="请输入保费金额"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <div style="width: 90%" v-if="nametype == '投标保函'">
          <!-- {{ly_content}} -->
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1" style="border-bottom: 2px solid #f5f6fa">
              <template slot="title">
                <div
                  style="display: flex; align-items: center; margin-left: 20px"
                >
                  <div class="qiu" style="">1</div>
                  <div class="qiutxt" style="">项目信息</div>
                </div>
              </template>
              <div style="background: #fff; padding: 3%">
                <el-row :gutter="14">
                  <el-form
                    ref="elForm"
                    style="background: #fff"
                    :model="content"
                    size="medium"
                    label-width="180px"
                    label-position="left"
                  >
                    <el-col :span="24">
                      <el-form-item label="保函编号" prop="basdasd">
                        <el-input
                          v-model="content.apply_number"
                          disabled
                          placeholder="请输入保函编号"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="工程名称" prop="htbh">
                        <el-input
                          v-model="content.xmmc"
                          @focus="tanchuang"
                          placeholder="请输入工程名称"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="业主(受益人)" prop="syr">
                        <el-input
                          v-model="content.syr"
                          placeholder="请输入业主(受益人)"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>

                    <el-col :span="24">
                      <el-form-item label="采购人" prop="bbzr">
                        <el-input
                          v-model="content.zbr"
                          placeholder="请输入采购人"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="投标人" prop="bbzr">
                        <el-input
                          v-model="content.tbr"
                          placeholder="请输入投标人"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="承包商(申请单位)" prop="bbzr">
                        <el-input
                          v-model="content.sqr"
                          placeholder="请输入承包商(申请单位)"
                          clearable
                          :style="{ width: '100%' }"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item
                        label="合同造价(中标价、合同价) "
                        prop="bhje"
                      >
                        <el-input
                          type="number​"
                          v-model="content.bhje"
                          placeholder="请输入合同造价(中标价、合同价) "
                          clearable
                          :style="{ width: '100%' }"
                        >
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="保证金额 " prop="bhje">
                        <el-input
                          type="number​"
                          v-model="content.bzjje"
                          placeholder="请输入保证金额 "
                          clearable
                          :style="{ width: '100%' }"
                        >
                          <template slot="append">元</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="保函费率 " prop="bhje">
                        <el-input
                          type="number​"
                          v-model="content.fl"
                          placeholder="请输入保函费率 "
                          clearable
                          :style="{ width: '100%' }"
                        >
                          <!-- <template slot="append">元</template> -->
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="担保起始日期" prop="startTime">
                        <el-date-picker
                          v-model="content.startTime"
                          @change="lykai"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          :style="{ width: '100%' }"
                          placeholder="请选择担保起始日期"
                          clearable
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="担保截止日期" prop="endTime">
                        <el-date-picker
                          v-model="content.endTime"
                          @change="lyjeidb"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          :style="{ width: '100%' }"
                          placeholder="请选择担保截止日期"
                          clearable
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="担保期(月)" prop="dbyue">
                        <el-input
                          v-model="content.dbyue"
                          placeholder="请输入担保期(月)"
                          clearable
                          :style="{ width: '100%' }"
                        >
                          <template slot="append">月</template>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                  <el-form-item label="合同签订时间" prop="field118">
                    <el-date-picker
                      v-model="field118"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{ width: '100%' }"
                      placeholder="请选择合同签订时间"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col> -->
                    <!-- <el-col :span="24">
                  <el-form-item label="出函日期" prop="field119">
                    <el-date-picker
                      v-model="field119"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{ width: '100%' }"
                      placeholder="请选择出函日期"
                      clearable
                    ></el-date-picker>
                  </el-form-item>
                </el-col> -->
                  </el-form>
                </el-row>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2" style="border-bottom: 2px solid #f5f6fa">
              <template slot="title">
                <div
                  style="display: flex; margin-left: 20px; align-items: center"
                >
                  <div class="qiu" style="">2</div>
                  <div class="qiutxt" style="">投标保函信息</div>
                </div>
              </template>
              <!-- <div
            style="
              display: flex;
              margin-top: 20px;
              align-items: center;
              margin-bottom: 20px;
            "
          >
            <div class="qiu" style="">2</div>
            <div class="qiutxt" style="">投标保函信息</div>
          </div> -->
              <div style="background: #fff; padding: 3%">
                <el-row :gutter="14">
                  <el-form
                    ref="elForm"
                    style="background: #fff"
                    :model="ly_content"
                    size="medium"
                    label-width="180px"
                    label-position="left"
                  >
                    <!-- <el-col :span="24">
                  <el-form-item label="投标保函名称" prop="dbqx">
                    <el-input
                      disabled
                      v-model="ly_content.dbqx"
                      placeholder="投标保函名称"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col> -->

                    <el-col v-if="false" :span="24">
                      <el-form-item label="担保金额(元)" prop="dbje">
                        <div
                          style="
                            display: flex;
                            justify-content: center;
                            flex-direction: column;
                          "
                        >
                          <!-- <div style="justify-content: space-between" class="flexs">
                  <div>合同造价 (中标价、合同价)</div>
                  <div>反担保金额</div>
                </div> -->
                          <div
                            style="justify-content: space-around"
                            class="flexs"
                          >
                            <div>
                              <div style="text-align: center">
                                合同造价 (中标价、合同价)
                              </div>
                              <input
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 100%;
                                  font-size: 16px;
                                  border-bottom: 2px solid;
                                  text-align: center;
                                "
                                v-model="ly_content.bhje"
                                type="text"
                              />
                            </div>
                            <div>
                              <div style="text-align: center">&nbsp;</div>
                              %
                            </div>
                            <div>
                              <div style="text-align: center">&nbsp;</div>
                              <el-radio-group @change="lyxuan" v-model="radio">
                                <el-radio :label="3">3%</el-radio>
                                <el-radio :label="6">5%</el-radio>
                                <el-radio :label="9">10%</el-radio>
                                <el-radio :label="5">其他</el-radio>
                              </el-radio-group>
                            </div>
                            <div>
                              <div style="text-align: center">&nbsp;</div>
                              <input
                                type="text"
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 70px;
                                  font-size: 18px;
                                  border-bottom: 2px solid;
                                "
                              />%
                            </div>
                            <div>
                              <div style="text-align: center">&nbsp;</div>
                              =
                            </div>
                            <div>
                              <div style="text-align: center">担保金额</div>
                              <input
                                type="text"
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 70px;
                                  font-size: 18px;
                                  border-bottom: 2px solid;
                                "
                              />元
                            </div>
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="保费" prop="field118">
                        <div
                          style="
                            display: flex;
                            justify-content: center;
                            flex-direction: column;
                          "
                        >
                          <!-- <div style="justify-content: space-between" class="flexs">
                 
                  <div>
                    
                   
                  </div>
                </div> -->
                          <div
                            style="display: flex; justify-content: space-around"
                            class="flexs"
                          >
                            <div>
                              <div>合同造价 (中标价、合同价)</div>
                              <input
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 70px;
                                  font-size: 18px;
                                  border-bottom: 2px solid;
                                "
                                disabled
                                v-model="content.bhje"
                                type="text"
                              />
                            </div>
                            <div>
                              <div>&nbsp;</div>
                              x
                            </div>
                            <div>
                              <div>保函费率</div>
                              <!-- <el-radio-group @change="lyxuan" v-model="radio">
                            <el-radio :label="3">3%</el-radio>
                            <el-radio :label="6">5%</el-radio>
                            <el-radio :label="9">10%</el-radio>
                            <el-radio :label="5">其他</el-radio>
                          </el-radio-group> -->
                              <input
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 70px;
                                  font-size: 18px;
                                  border-bottom: 2px solid;
                                "
                                v-model="content.fl"
                                type="text"
                              />
                            </div>
                            <div v-if="false">
                              <div>&nbsp;</div>
                              <input
                                type="text"
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 70px;
                                  font-size: 18px;
                                  border-bottom: 2px solid;
                                  text-align: center;
                                "
                              />%
                            </div>
                            <div>
                              <div>&nbsp;</div>
                              X
                            </div>
                            <div>
                              <div style="text-align: center">担保期</div>
                              <input
                                v-model="content.dbyue"
                                type="text"
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 70px;
                                  font-size: 18px;
                                  border-bottom: 2px solid;
                                  text-align: center;
                                "
                              />
                            </div>
                            <div>
                              <div style="text-align: center">&nbsp;</div>
                              =
                            </div>
                            <div>
                              <div>保费</div>
                              <input
                                type="text"
                                style="
                                  height: 24px;
                                  padding: 0;
                                  width: 70px;
                                  font-size: 18px;
                                  border-bottom: 2px solid;
                                  text-align: center;
                                "
                                v-model="content.bfje"
                              />元
                            </div>
                          </div>
                        </div>
                      </el-form-item>
                    </el-col>
                  </el-form>
                </el-row>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <!-- 业主保函 -->

        <!-- 农民工工资支付保函 -->

        <!-- 履约保函 -->
        <!-- {{ly_content}} -->

        <!-- 质量保函 -->
      </el-row>
    </div>

    <div class="footer">
      <el-button
        v-if="isShow"
        @click="Submittals"
        style="width: 175px; height: 60px"
        >上一步</el-button
      >
      <el-button
        @click="Signature"
        style="width: 175px; height: 60px"
        type="primary"
        >下一步</el-button
      >
      <!-- <el-button v-if="this.nametype !== '投标保函'" @click="Signature" style="width: 175px; height: 60px" type="primary">下一步</el-button> -->
      <!-- <el-button  @click="Signature"  v-if="isShow"  style="width: 175px; height: 60px" type="primary">提交审核</el-button>
        <el-button v-if="!isShow" @click="$router.push('/')" style="width: 175px; height: 60px" type="primary">回到首页</el-button>
       <el-button   v-if="isShow1" style="width: 175px; height: 60px" type="info" disabled>审核中</el-button>
         <el-button v-if="isShow2" @click="$router.push('/Bidpayments')" style="width: 175px; height: 60px"  type="primary" disabled="">审核已完成，去支付</el-button> -->
    </div>
  </div>
</template>

<script>
import BDhear from "./BDhear.vue";
// import hear from ".././../components/hear.vue";
import { bidfrom } from "@/api/system/liucheng";
import { bhdetail1 } from "@/api/system/liucheng";
import {
  bhpay2,
  danbaoqianzhang,
  bhpay,
  bhpay3,
  zhifuasd,
  faren,
  detail,
} from "@/api/system/liucheng";
import axios from "axios";
export default {
  components: {
    BDhear,
    // hear
  },
  props: [],
  statis: false,
  name: "bidFrom",
  data() {
    return {
      isShow: true,
      isShow1: false,
      isShow2: false,
      isShow3: false,
      //履约保函 {"syr":"123","bbzr":"312312312","htbh":"12312312","dbje":"3123123","bhje":13.44,"endTime":"2022-10-10","dbqx":"12","bfje":1935.3600000000001,"fl":"12","fdbbzj":"123","startTime":"2022-09-28"}
      //投标保函 {"bhje":1477.44,"sqr":"1233","syr":"12312","zbr":"3123","tbr":"123123","xmmc":"1231","xmbh":"23123","bzjje":"123","startTime":"2022-10-28","endTime":"2022-11-09","dbqx":"12","bfje":212751.36,"fl":"12"}
      //业主支付保函 {"yf":"123","jf":"123","htqd":"2022-09-28","htbh":"123123","bhje":12.3,"startTime":"2022-09-28","endTime":"2022-10-10","dbqx":"12","bfje":18172954.800000004,"fl":"123123","fdbbzj":"12","dbje":12.3,"zfje":12.3}
      //农名工工资支付保函 {"syr":"12312","bbzr":"123123","gcxm":"123123","qdsj":"2022-09-28","xmdz":"123123","jzmj":"123123","gczj":"1231231","bhje":283.13,"xmdzdbbz":"123123","gqStartTime":"2022-09-28","gqEndTime":"2022-10-10","day":"123","bzqStartTime":"2022-09-28","bzqEndTime":"2022-10-10","dbqx":"10","bfje":28313,"fl":"10","fdbbzj":""}
      //质量保函 {"syr":"","bbzr":"2312","htbh":"12312","bhje":151.29,"endTime":"2026-01-22","dbqx":"1212","bfje":22576261748.039997,"fl":"123123","fdbbzj":"123123","startTime":"2022-09-28"}
      // 农民工工资支付保函
      // 质量保函

      zl_content: {
        syr: "",
        bbzr: "2312",
        htbh: "12312",
        bhje: 151.29,
        endTime: "2026-01-22",
        dbqx: "1212",
        bfje: 22576261748.039997,
        fl: "123123",
        fdbbzj: "123123",
        startTime: "2022-09-28",
      },
      // 履约保函
      ly_content: {
        syr: sessionStorage.getItem("purchase_person_name"),
        bbzr: sessionStorage.getItem("cardname"),
        htbh: sessionStorage.getItem("bidding_project_name"),
        dbje: "3123123",
        bhje: sessionStorage.getItem("margin_amount"),
        bhbh: sessionStorage.getItem("apply_number"),
        endTime: "2022-10-10",
        dbqx: "12",
        bfje: 1935.3600000000001,
        fl: "12",
        fdbbzj: "123",
        startTime: "2022-09-28",
      },
      nm_content: {
        syr: "12312",
        bbzr: "123123",
        gcxm: "123123",
        qdsj: "2022-09-28",
        xmdz: "123123",
        jzmj: "123123",
        gczj: "1231231",
        bhje: 283.13,
        xmdzdbbz: "123123",
        gqStartTime: "2022-09-28",
        gqEndTime: "2022-10-10",
        day: "123",
        bzqStartTime: "2022-09-28",
        bzqEndTime: "2022-10-10",
        dbqx: "10",
        bfje: 28313,
        fl: "10",
        fdbbzj: "",
      },
      formData: {
        apply_number: sessionStorage.getItem("apply_number"),
        guarantee_apply_id: sessionStorage.getItem("guarantee_apply_id"),
        diya: undefined,
        chuzhi: undefined,
        fandanbao: undefined,
        // handler_name_one: undefined,
        // cardno_one: undefined,
        // captcha_one:"",
        // proid: undefined,
        // handler_mobile_one: undefined,
        handler_name_one: "王治家",
        cardno_one: "410381198711235517",
        captcha_one: "123456",
        proid: undefined,
        handler_mobile_one: "13681030210",
      },
      // 业主支付保函
      yz_content: {
        yf: "",
        jf: "",
        htqd: "",
        htbh: "",
        bhje: null,
        startTime: "",
        endTime: "",
        dbqx: "",
        bfje: null,
        fl: "",
        fdbbzj: null,
        dbje: null,
        zfje: null,
      },
      // 投标保函
      // isShow:false,
      isShow1: false,
      isShow2: false,
      falasdse: false,
      radio: 3,
      content: {
        bhje: 100,
        // xma_mobile:sessionStorage.getItem("xma_mobile"),
        sqr: "", //"测试申请人",
        syr: "", //"测试受益人",
        zbr: "", //"测试招标人",
        tbr: "", //"测试投标人",
        xmmc: "", // "测试项目",
        xmbh: "", // "cs0001",
        bzjje: "", // "1",
        startTime: "", // "2022-09-21",
        endTime: "", //"2022-10-01",
        dbqx: "", // "60天",
        bfje: null,
        fl: "", //"0.001",
        field117: null,
        dbyue: null,
      },
      ruless: {
        field102: [
          {
            required: true,
            message: "请输入保函编号",
            trigger: "blur",
          },
        ],
        field110: [
          {
            required: true,
            message: "请输入项目编号",
            trigger: "blur",
          },
        ],
        field103: [
          {
            required: true,
            message: "请输入保函金额",
            trigger: "blur",
          },
        ],
        field111: [
          {
            required: true,
            message: "请输入保证金额",
            trigger: "blur",
          },
        ],
        field124: [
          {
            required: true,
            message: "请输入申请人",
            trigger: "blur",
          },
        ],
        field120: [
          {
            required: true,
            message: "请输入起始时间",
            trigger: "blur",
          },
        ],
        field125: [
          {
            required: true,
            message: "请输入受益人",
            trigger: "blur",
          },
        ],
        activeNames: ["1"],
        field113: [
          {
            required: true,
            message: "请输入截止时间",
            trigger: "blur",
          },
        ],
        field123: [
          {
            required: true,
            message: "请输入招标人",
            trigger: "blur",
          },
        ],
        field114: [
          {
            required: true,
            message: "请输入担保期限",
            trigger: "blur",
          },
        ],
        field115: [
          {
            required: true,
            message: "请输入投标人",
            trigger: "blur",
          },
        ],
        field116: [
          {
            required: true,
            message: "请输入费率",
            trigger: "blur",
          },
        ],
        field121: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        field122: [
          {
            required: true,
            message: "请输入保费金额",
            trigger: "blur",
          },
        ],
      },
      cion: {
        id: "",
      },
      nametype: sessionStorage.getItem("bhlein"),
    };
  },
  created() {
    //  this.xinagqing()
    // this.nametype = ;
    this.content.xmbh = sessionStorage.getItem("bidding_number");
    this.content.apply_number = sessionStorage.getItem("apply_number");
    var biansd = sessionStorage.getItem("guarantee_apply_id");
    // bhdetail1({ apply_number: this.content.apply_number }).then((err) => {
      detail({
        applyNumber: this.content.apply_number,
        // guarantee_apply_id: biansd,
      }).then((err) => {
      console.log("已经提交", err.data);
      var baohanjibe = err.data.jiben;
      this.content.bhje = baohanjibe.marginAmount;
      this.content.tbr = baohanjibe.applyCompanyName;
    });
    sessionStorage.setItem("apply_number", this.content.apply_number);
    this.content.xmbh = sessionStorage.getItem("bidding_name");
    this.content.sqr = sessionStorage.getItem("cardname");
    this.content.zbr = sessionStorage.getItem("purchase_person_name");
    this.content.syr = sessionStorage.getItem("purchase_person_name");
    // this.content.xmbh = sessionStorage.getItem("bidding_number");
    this.content.xmmc = sessionStorage.getItem("bidding_project_name");
    this.content.fl = sessionStorage.getItem("guarantee_company_rate");

    this.content.startTime = this.dateFormat(
      sessionStorage.getItem("bid_begin_time")
    );
    var bbc = 60 * 3600 * 24 + Number(sessionStorage.getItem("bid_begin_time"));
    this.content.endTime = this.dateFormat(bbc);
    // console.log( this.content.endTime,bbc)
    this.cion.id = sessionStorage.getItem("guarantee_apply_id");
    // this.shijai()
    this.content.dbyue = this.calculateDiffTime(
      this.content.startTime,
      this.content.endTime
    );
    this.ahsdk();
  },
  methods: {
    lyjeidb(e) {
      this.content.dbyue = this.calculateDiffTime(
        this.content.startTime,
        this.content.endTime
      );
    },
    calculateDiffTime(e, i) {
      console.log(e, i);
      let endTime = i; //2021-08-16 17:51
      let startTime = e; //2032-08-16 17:51
      let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
      let start = new Date(startTime);
      let end = new Date(endTime);
      let year = end.getFullYear() - start.getFullYear();
      let month = end.getMonth() - start.getMonth();
      let day = end.getDate() - start.getDate();
      if (month < 0) {
        year--;
        month = end.getMonth() + (12 - start.getMonth());
      }
      if (day < 0) {
        month--;
        let index = flag.findIndex((temp) => {
          return temp === start.getMonth() + 1;
        });
        let monthLength;
        if (index <= 6) {
          monthLength = 31;
        } else if (index > 6 && index <= 10) {
          monthLength = 30;
        } else {
          monthLength = 28;
        }
        day = end.getDate() + (monthLength - start.getDate());
      }
      var cion = 0;
      if (year !== 0) {
        cion = cion + 12 * year;
      }
      if (true) {
        cion = cion + month;
      }
      if (day >= 10) {
        cion = cion + 1;
      }
      this.result = `相差${year}年${month}月${day}天`;
      console.log(this.result, cion);
      return cion;
    },
    lykai(e) {
      this.content.dbyue = this.calculateDiffTime(
        this.content.startTime,
        this.content.endTime
      );
      // // this.content.dbstartTime = this.ly_content.startTime;
      // this.ly_content.field119 = this.ly_content.startTime;
      // console.log(123, this.sdateFormat(e), this.ly_content.startTime);
    },
    xinagqing() {
      var bbc = {
        bh_id: sessionStorage.getItem("guarantee_apply_id"),
      };
      detail(bbc).then((res) => {
        console.log("保函详情", res.data.data.jiben);
        console.log("审核状态", res.data.data.jiben.state);
        console.log("进度", res.data.data.jiben.step);
        console.log("审核人员", res.data.data.jiben.check_id);
        var shenhe = res.data.data.jiben.state;
        var jindu = res.data.data.jiben.step;
        var renyaun = res.data.data.jiben.check_id;
        // 测试
        //  this.isShow2=true

        if (shenhe == 0 && jindu == 1 && renyaun == null) {
          console.log("未提交");
        } else {
          this.isShow = false;
        }
        if (shenhe == 1 && jindu == 2 && renyaun == null) {
          console.log("第一次提交审核");
          this.isShow1 = true;
        }
        if (shenhe == 1 && jindu == 2 && renyaun !== null) {
          console.log("第一次已分配");
          this.isShow1 = true;
        }
        if (shenhe == 2 && (jindu == 3) & (renyaun !== null)) {
          console.log("第一次审核完成");
          this.isShow2 = true;
        }
        if (shenhe == 1 && (jindu == 4) & (renyaun !== null)) {
          console.log("第二次提交审核");
        }
        if (shenhe == 2 && (jindu == 3) & (renyaun !== null)) {
          console.log("第二次审核完成");
        }
        // 审核状态 state
        // 进度  step
        // 审核人员  check_id

        if (res.data.code == 1) {
          // this.$message.success("签订成功");
        }
      });
    },
    lyxuan(e) {
      console.log(e);
    },
    tiao() {
      console.log("第五步");
      if (false) {
        axios({
          url: "http://192.168.0.28:8082/mobile/agent/baohan/guarantee_add",
          method: "post", // params: '必须是一个无格式对象 query参数',
          data: {
            handler_name_one: this.formData.handler_name_one,
            handler_mobile_one: this.formData.handler_mobile_one,
            cardno_one: this.formData.cardno_one,
            captcha_one: this.formData.captcha_one,
            proid: sessionStorage.getItem("proid"),
            apply_number: sessionStorage.getItem("apply_number"),
          },
          timeout: 1000,
          headers: {
            token: sessionStorage.getItem("token"),
          },
        })
          .then((res) => {
            this.$notify.error({
              message: res.data.msg,
            });
            console.log("tijiao", res);
            if (res.data.code == 1) {
              this.$message.success("提交成功等待审核");
              // this.isShow = false;
            }
            // this.$router.push("/BidSecurity/Bidpayment");
          })
          .catch((err) => {
            console.log("失败", err.response.data);
            if (err.response.data.code == 401) {
              this.$notify.error({
                message: "请重新登录",
              });
              this.$router.push("/login");
              return;
            }
            this.$notify.error({
              message: err.response.data.msg,
            });
          });
      } else {
        axios({
          // url: "http://192.168.0.28:8082/mobile/agent/baohan/subdata",
          url: "http://192.168.0.28:8082/apply/baohan/subdata",
          method: "post", // params: '必须是一个无格式对象 query参数',
          data: {
            apply_number: sessionStorage.getItem("apply_number"),
          },
          timeout: 1000,
          headers: {
            Authorization:"Bearer "+ sessionStorage.getItem("token"),
          },
        })
          .then((res) => {
            //    this.$notify.error({
            //   message: res.data.msg
            // });
            console.log("tiao", res);
            if (res.data.code == 1) {
              this.$message.success("提交成功等待审核");
              this.isShow = false;
            }
            // this.$router.push("/BidSecurity/Bidpayment");
          })
          .catch((err) => {
            console.log("失败", err.response.data);
            if (err.response.data.code == 401) {
              this.$notify.error({
                message: "请重新登录",
              });
              this.$router.push("/login");
              return;
            }
            this.$notify.error({
              message: err.response.data.msg,
            });
          });
      }
    },
    ahsdk() {
      console.log("失去焦点",this.content.bzjje,this.content.fl);
      this.content.bfje = Number(this.content.bzjje) * Number(this.content.fl);
      if (this.content.bfje <= 200) {
        this.content.bfje = 200;
      }
      console.log(this.content.bfje);
    },
    dateFormat(value) {
      let date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " "; //多种时间格式的拼接
    },
    tanchuang() {
      console.log(123);
      this.statis = true;
    },
    bidfroms() {
      // 测试用startTime:'2023-11-23', endTime:'23023-12-21',
      // this.content.apply_number = '202206111510479560224355981014';
      // this.content.bhje = 2090000.00;
      // this.content.startTime = '2023-11-23';
      // this.content.endTime = '2023-12-23';
      console.log("第二步", this.content);
      var that = this;
      let Base64 = require("js-base64").Base64; // 引入
      if (this.nametype == "履约保函") {
        console.log(1);
        var c = Base64.encode(JSON.stringify(this.ly_content));
      }
      if (this.nametype == "投标保函") {
        console.log(2);
        var c = Base64.encode(JSON.stringify(this.content));
      }
      if (this.nametype == "业主支付保函") {
        console.log(3);
        var c = Base64.encode(JSON.stringify(this.yz_content));
      }
      if (this.nametype == "农民工工资支付保函") {
        console.log(4);
        var c = Base64.encode(JSON.stringify(this.nm_content));
      }
      if (this.nametype == "质量保函") {
        var c = Base64.encode(JSON.stringify(this.zl_content));
      }
      //转json
      // var cion = {
      //   guarantee_apply_id: this.cion.id,
      //   content: c,
      //   user_id: sessionStorage.getItem("user_id")
      // };
      var cion = {
        // apply_number: sessionStorage.getItem("apply_number"),
        apply_number: "202206111510479560224355981014",
        content: c,
      };
      axios({
        // url: "http://192.168.0.28:8082/apply/baohan/datasub",
        url: "http://192.168.0.28:8082/guarantee/datasub",
        method: "post", // params: '必须是一个无格式对象 query参数',
        data: {
          ...cion,
        },
        timeout: 1000,
        headers: {
          Authorization: "Bearer " + sessionStorage.getItem("token"),
        },
      })
        .then((res) => {
          console.log("第仨步");
          if (res.data.code == 200) {
            this.$message({
              message: "提交成功",
              type: "success",
            });
            console.log("第四步");
            // that.tiao()
            //         if(this.nametype == "投标保函"){
            // this.$router.push("/sAgreement");
            //         }else{
            this.$router.push("/BidSecurity/Protocol");
            //         }
          } else {
            console.log("错第一步");
            this.$message.error(res.data.mag);
          }
          // this.$router.push("/BidSecurity/Bidpayment");
        })
        .catch((err) => {
          console.log("错第二步");
          console.log("失败", err.response.data);
          if (err.response.data.code == 401) {
            this.$notify.error({
              message: "请重新登录",
            });
            this.$router.push("/login");
            return;
          }
          this.$notify.error({
            message: err.response.data.msg,
          });
        });

      return;
      bidfrom(cion).then((err) => {
        console.log("已经提交", err.data.code);
        if (err.data.code == 1) {
          this.$message({
            message: "提交成功请等待审核",
            type: "success",
          });
          this.$router.push("/Agreement");
        } else {
          this.$message.error(err.data.mag);
        }
      });
    },
    Submittals() {
      this.$router.push("/BidSecurity/Submission");
    },
    Signature() {
      console.log("第一步");
      this.bidfroms();
    },
  },
};
</script>

<style scoped>
.main {
  /* position: absolute;
  width: 1600px;
  height: 600px;
  top: 200px;
  right: 0;
  bottom: 0;
  left: 0; */
  margin: auto;
  padding: 3% 5%;
}
.footer {
  /* position: absolute;
  bottom: 30px;
  left: 39%; */
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.heng {
  text-decoration: underline;
}
.ly_tou {
  color: #ff2f1f;
  /* color: #f95c50; */
  font-size: 18px;
  font-weight: 500;
}
.ly_lan {
  color: #5181bd;
}
.ly_fen {
  display: flex;
  width: 66%;
  justify-content: space-between;
}
.main {
  /* position: absolute;
  width: 1600px;
  height: 600px;
  top: 200px;
  right: 0;
  bottom: 0;
  left: 0; */
  background-color: #f5f6fa;
  margin: auto;
  padding: 1.5% 5%;
}
.footer {
  /* position: absolute;
  bottom: 30px;
  left: 39%; */
  background-color: #f5f6fa;
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.qiu {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #409eff;
  color: #fff;
  font-size: 19px;
  margin-right: 10px;
  border-radius: 100%;
}
.qiutxt {
  font-size: 21px;
}
.hxxin {
  height: 24px;
  padding: 0;
  font-size: 18px;
  border-bottom: 2px solid;
  text-align: center;
}
</style>
